
<!--
 * @Author: wang_sheshe
 * @Date: 2021-05-17 15:04:17
 * @LastEditTime: 2021-08-10 13:54:04
 * @Description: 登记设备
-->
<template>
	<article class="bg_4dbfae">
		<div v-if="!showFinish">
			<!-- 头组件 -->
			<van-nav-bar title="维护记录登记"  left-arrow @click-left="back">
				<!-- <template slot="right">
					<div class="parent-circle">
						<div class="child-circle"></div>
					</div>
				</template> -->
			</van-nav-bar>
			
			<!-- content -->
			<div style="background:#F5F6FA;">
				<van-search v-model.trim="subName" show-action clearable readonly disabled @click="showSubStation=true" shape="round"  placeholder="请选择变电站">
					<template slot="action">
						<van-icon name="arrow-down" @click="showSubStation=true"/>
					</template>
				</van-search>
			</div>
			<div class="task-list-content">
				<van-collapse v-model="activeNames" class="collapse">
					<van-collapse-item :name="typeItem.workItemTypeId" v-for="(typeItem,ind) in DeviceTaskList" :title="typeItem.workItemTypeName" :key="typeItem.workItemTypeId">
						<div slot="title" style="display: flex;">
							<span class="line_green"></span>
							<span>{{ typeItem.workItemTypeName }}</span>
							<span class="workAll">
								<van-checkbox checked-color="#057b54" @click.stop="selWorkAll(typeItem)" v-model="typeItem.check">
								</van-checkbox>
							</span>
						</div>
						  <!-- 间隔下设备列表 -->
						<van-list
							:finished="finished">
							<van-cell
								v-for="(item,index) in typeItem.workItemList"
								clickable
								:key="index"            
								@click="deviceClickEvent(item)"
								>
								<div slot="title">
									<div style="display: flex;justify-content: space-between;">
										<span>{{item.workItemName}}</span>
										<van-checkbox 
										@click.stop="selSingleWork(item)"  style="display: inline;margin-right: 15px;margin-left: 0.6rem;" v-model="item.check" 
										checked-color="#057b54"/>
									</div>
									<div>
										<span style="color: #999999;">{{item.requireFinishTime | formate}}</span>
									</div>
								</div>
							</van-cell>
						</van-list>
					</van-collapse-item>
				</van-collapse>
			</div>
			
			<van-row class="btn-wrapper" style="text-align: center;">
				<van-button type="default" size="small" class="c" @click="concel">取消</van-button>
				<van-button type="primary" size="small" class="c" @click="confirm">开始登记</van-button>
			</van-row>
		</div>

		<!-- 设备提交页面 -->
		<protect-finish v-if="showFinish" :selTaskList="selTaskList" @confirm="onConfirm" @cancel="onCancel"></protect-finish>

		<!-- 变电站 -->
		<van-popup class="selSub" round close-on-click-overlay v-model="showSubStation" position="bottom" @close="showSubStation=false">
			<selSubstation @close="showSubStation=false" @selected="subStationBtn"></selSubstation>
		</van-popup>
	</article>
</template>

<script type="text/javascript">
	import Util from "@/utils/util"
	import ProtectFinish from './ProtectFinish';
	import {queryMaintainDevice} from '../../api/deviceProfect';
	import selSubstation  from "@/components/SelectSubstation" 
	export default {
		name: 'DefectManage',
		components: {
			ProtectFinish,
			selSubstation
		},
		data() {
			return {
				finished:true,
                subName:"",
                showPicker:false,
				activeNames:[],
				DeviceTaskList: [], 
				showFinish:false,
				showSubStation:false,
				selTaskList:[],//选中任务列表
				subId: "",//变电站id
				userInfo:{}
			}
		},
		
		methods: {
			confirm(){
				this.selTaskList = [];
				console.log("DeviceTaskList",this.DeviceTaskList)
				this.DeviceTaskList.forEach(typeItem => {
					var item = {
						workItemTypeName: typeItem.workItemTypeName,
						workItemTypeId: typeItem.workItemTypeId,
						workItemList: []
					}
					typeItem.workItemList.forEach(itemList => {
						if(itemList.check) {
							item.workItemList.push(itemList)
						}
					})
					if(item.workItemList.length > 0) {
						this.selTaskList.push(item)
					}
				})
				if(this.selTaskList.length == 0) {
					this.$Toast.fail("请选择维护记录!")
					return;
				}
				console.log("this.selTaskList",this.selTaskList)
				this.showFinish = true;
            },
            onConfirm(){
				this.queryMaintainDevice();
                this.showFinish = false;
            },
            onCancel(){
				this.showFinish = false;
            },
			deviceClickEvent(){},
			/**
			 * 返回
			 */
			 back(){
				this.$router.push({"name":"MainHome"})
			},
			//选择变电站
			subStationBtn(val) {
				this.showSubStation = false;
				this.subName = val.substationName;
				this.subId = val.substationId;
				console.log("val",val)
				this.queryMaintainDevice();
			},
			/**
			* @description: 查询维护设备
			* @param {*}
			* @return {*}
			*/
			queryMaintainDevice() {
				var self = this;
				var params = {
					substationId: this.subId,//变电站id
					userId: this.userInfo.userId,//用户id
					orgId: this.userInfo.orgId,//用户id
					roleCode: "",//用户角色
				}
				this.$Toast.loading({
						duration: 0,//展示时长 0不会消失
						message: "查询维护设备...",
						forbidClick: true,//是否禁止背景点击
						overlay: true//是否显示背景遮罩层
					})
				queryMaintainDevice(params).then(data => {
					self.$Toast.clear();
					if(data.success) {
						self.$Toast.success(data.msg)
						self.DeviceTaskList = data.data;//维护记录
						self.DeviceTaskList.forEach(item => {
							item["check"] = false;
						})
					}else{
						self.$Toast.fail(data.msg)
					}
				}).catch(err => {
					self.$Toast.fail(err)
				})
			},
			concel() {
				history.go(-1)
			},
			//选择全部
			selWorkAll(typeItem) {
				this.DeviceTaskList.forEach(typeItem => {
					if(typeItem.check) {
						typeItem.workItemList.forEach(item => {
							item.check = true;
						})
					}else{
						typeItem.workItemList.forEach(item => {
							item.check = false;
						})
					}
				})
				this.DeviceTaskList = JSON.parse(JSON.stringify(this.DeviceTaskList))
			},
			//单选
			selSingleWork(item) {
				this.DeviceTaskList.forEach(typeItem => {
					var bool = typeItem.workItemList.every(item => item.check);
					if(bool) {
						typeItem.check = true;
					}else{
						typeItem.check = false;
					}
				})
				this.DeviceTaskList = JSON.parse(JSON.stringify(this.DeviceTaskList))
			}
		},
		filters: {
			formate(val) {
				return Util.DateUtil.getFormatDateByLong(val,'yyyy年MM月dd日')
			}
		},
		
		mounted() {
			
		},
		created() {
			var userInfo = localStorage.getItem("userInfo");
			this.userInfo = JSON.parse(userInfo);
			this.queryMaintainDevice();//日常维护列表
		},
		
	}
</script>

<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
        font-family: 微软雅黑;
        background: #ffffff;
	}
	.bg_4dbfae{
		background: #f5f6fa !important;
	}
	.active{
		color: #36BDA6 !important;
		background: #ECF6F4 !important;
	}
	.van-nav-bar__text,.van-nav-bar .van-icon{
		color: #333333;
    }
    .van-button--default {
        margin-right: 20px !important;
        width: 80px;
    }
    .van-button--primary {
		background-color: #17B49B;
        border: 0.02667rem solid #17B49B;
        color: white;
        width: 138px;
        margin: 0 auto;
    }
	.lineGray{
		height: 8px;
		background-color: #F5F6FA;
		border-radius: 5px;
		margin: 10px;
	}
	.templateDiv{
		display: flex;
		justify-content: space-between;
		padding: 10px 15px;
		font-size: 1.125rem;
	}
	.van_Input textarea{
		display: block;
		width: 100% !important;
		border: 1px solid #f2f2f3;
		border-radius: 4px;
		height: 50px;
	}
	.line{
		display: inline-block;
		width: calc(100% - 150px);
		height: 1px;
		background-color: #999999;
		margin-left: 35px;
		position: relative;
		top: 0.2rem;
	}
	.line_green{
		display: inline-block;
		height: 16px;
		width: 3px;
		background: #17B49B;
		border-radius: 3px;
		position: relative;
		top: 3px;
		margin-right: 10px;
    }
	.van-search{
		margin-right: 10px;
		background:#F5F6FA;
	}
	.van-search__content--round{
		background: #fff;
	}
	.selSub{
		width: 100%;
		height: 100%;
	}
	.btn-wrapper{
		position: fixed;
		width: 100%;
		bottom: 5px;
	}
	.workAll{
		position: absolute;
    	right: 12.7%;
		top:12px;
	}
	
</style>
